<template>
  <div class="page-container">
    <div class="form-container">
      <el-form
        :inline="true"
        label-suffix="："
        :label-width="'100px'"
        :size="'small'"
        ref="form"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item label="业务编号">
              <el-input
                v-model="query.doccode"
                clearable
                placeholder="请输入"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="结算对象名称" label-width="100px">
              <el-select
                v-model="query.entId"
                placeholder="请选择结算对象"
                style="width: 100%"
                clearable
                filterable
                remote
                :remote-method="getBusDetail"
                :loading="settlementLoading"
              >
                <el-option
                  v-for="item in settlementList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                  <span style="float: left">{{ item.label }}</span>
                  <span style="float: right">{{ item.entFullname }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="提单号">
              <el-input
                v-model="query.blNo"
                clearable
                placeholder="请输入"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="发票号">
              <el-input
                v-model="query.invoice"
                clearable
                placeholder="请输入"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="业务员">
              <el-select
                v-model="query.saleId"
                placeholder="请选择业务员"
                style="width: 100%"
                clearable
                filterable
                remote
                :remote-method="getSalesman"
                :loading="salesmanLoading"
              >
                <el-option
                  v-for="item in salesman"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="收/付">
              <el-select
                v-model="query.isIncome"
                placeholder=" "
                style="width: 100%"
                filterable
                disabled
              >
                <el-option label="全部" :value="''"> </el-option>
                <el-option label="收" :value="1"> </el-option>
                <el-option label="付" :value="0"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="币种">
              <el-select
                v-model="query.currency"
                placeholder="请选择币种"
                style="width: 100%"
                clearable
                filterable
                remote
                :remote-method="getCurrentData"
                :loading="currentLoading"
              >
                <el-option
                  v-for="item in current"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                  <span style="float: left"> {{ item.label }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="审核状态">
              <el-select
                v-model="query.checkStatus"
                placeholder="请选择审核状态"
                style="width: 100%"
                filterable
                disabled
              >
                <el-option
                  v-for="item in aduitStatus"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="对账单号">
              <el-input
                v-model="query.balanceNo"
                clearable
                placeholder="请输入"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="开票状态">
              <el-select
                v-model="query.invoiceStatus"
                placeholder=" "
                style="width: 100%"
                filterable
              >
                <el-option label="全部" :value="''"> </el-option>
                <el-option label="已开票" :value="1"> </el-option>
                <el-option label="未开票" :value="0"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="核销状态">
              <el-select
                v-model="query.feeStatus"
                placeholder="请选择核销状态"
                style="width: 100%"
                filterable
                disabled
              >
                <el-option
                  v-for="item in WriteOffStatus"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="flex-container">
          <el-button type="primary" icon="search" @click="getList" size="small">
            搜索
          </el-button>
          <el-button type="info" icon="refresh" @click="reset" size="small">
            重置
          </el-button>
        </div>
      </el-form>
    </div>
    <div class="in-container" style="margin-top: 8px">
      <div class="btn-box">
        <el-button type="default" icon="RefreshRight" @click="getList">
        </el-button>
      </div>
      <AppPageTable
        stripe
        :data="tableData.data"
        @change="getList"
        :height="525"
        :option="tableData.option"
        v-loading="tableLoading"
      >
        <el-table-column
          type="selection"
          width="40"
          align="center"
          fixed="left"
        />
        <el-table-column
          prop="doccode"
          width="120"
          label="业务编号"
          align="center"
          showOverflowTooltip
        >
          <template #default="scope">
            <span class="doccode-text" @click="toEditPage(scope.row)">{{
              scope.row.doccode
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="blNo"
          width="100"
          align="center"
          label="提单号"
          showOverflowTooltip
        >
        </el-table-column>
        <el-table-column
          prop="invoiceCode"
          label="发票号"
          align="center"
          width="100"
          showOverflowTooltip
        >
        </el-table-column>
        <el-table-column
          prop="balanceDoccode"
          width="100"
          label="对账单号"
          align="center"
          showOverflowTooltip
        >
        </el-table-column>
        <el-table-column
          label="开票日期"
          align="center"
          width="100"
          showOverflowTooltip
        >
          <template #default="scope">
            {{
              scope.row.invoiceDate
                ? $utils.formatDateTime(scope.row.invoiceDate, 'YYYY-MM-DD')
                : ''
            }}
          </template>
        </el-table-column>
        <el-table-column
          label="开航日期"
          align="center"
          width="100"
          showOverflowTooltip
        >
          <template #default="scope">
            {{
              scope.row.etd
                ? $utils.formatDateTime(scope.row.etd, 'YYYY-MM-DD')
                : ''
            }}
          </template>
        </el-table-column>
        <el-table-column
          label="装箱日期"
          align="center"
          width="100"
          showOverflowTooltip
        >
          <template #default="scope">
            {{
              scope.row.packTime
                ? $utils.formatDateTime(scope.row.packTime, 'YYYY-MM-DD')
                : ''
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="vessel"
          align="center"
          label="船名"
          showOverflowTooltip
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="voyage"
          align="center"
          label="航次"
          width="100"
          showOverflowTooltip
        >
        </el-table-column>
        <el-table-column
          prop="portDepartureName"
          align="center"
          label="起运港"
          width="100"
          showOverflowTooltip
        >
          <template #default="scope">
            {{ scope.row.portDepartureName ? scope.row.portDepartureName : '' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="portDestinationName"
          align="center"
          label="目的港"
          showOverflowTooltip
          width="100"
        >
          <template #default="scope">
            {{
              scope.row.portDestinationName ? scope.row.portDestinationName : ''
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="entFullname"
          align="center"
          label="结算对象名称"
          width="150"
          showOverflowTooltip
        >
        </el-table-column>
        <el-table-column
          label="收/付"
          align="center"
          width="100"
          showOverflowTooltip
        >
          <template #default="scope">
            {{ scope.row.isIncome == 1 ? '收款' : '付款' }}
          </template>
        </el-table-column>
        <el-table-column label="费用类型" align="center" width="100">
          <template #default="scope">
            {{ scope.row.feeName }}
          </template>
        </el-table-column>
        <el-table-column
          prop="currency"
          label="币种"
          align="center"
          width="100"
          showOverflowTooltip
        >
        </el-table-column>
        <el-table-column
          prop="totalmoney"
          label="金额"
          align="center"
          width="100"
          showOverflowTooltip
        >
        </el-table-column>
        <el-table-column
          prop="verificationMoney"
          label="已销金额"
          align="center"
          width="100"
          showOverflowTooltip
        >
        </el-table-column>
        <el-table-column
          label="未销金额"
          align="center"
          width="100"
          showOverflowTooltip
        >
          <template #default="scope">
            {{ scope.row.totalmoney - scope.row.verificationMoney }}
          </template>
        </el-table-column>
        <el-table-column
          prop="natMoney"
          width="100"
          align="center"
          label="折人民币"
          showOverflowTooltip
        >
        </el-table-column>
        <el-table-column
          label="审核"
          align="center"
          width="100"
          showOverflowTooltip
        >
          <template #default="scope">
            {{ scope.row.checkStatus == 1 ? '已审' : '未审' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="checkName"
          width="100"
          align="center"
          label="审核人"
          showOverflowTooltip
        >
        </el-table-column>
        <el-table-column
          prop="checkTime"
          width="100"
          align="center"
          label="审核日期"
          showOverflowTooltip
        >
          <template #default="scope">
            {{
              scope.row.checkTime
                ? $utils.formatDateTime(
                    scope.row.checkTime,
                    'YYYY-MM-DD HH:mm:ss'
                  )
                : ''
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="feeMemo"
          align="center"
          label="备注"
          showOverflowTooltip
        >
        </el-table-column>
      </AppPageTable>
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import AppPageTable, { useTableOption } from '@/components/AppPageTable2'
import request from '@/public/request'
import dayjs from 'dayjs'
import { MoreFilled } from '@element-plus/icons'
import { fileDownload } from '@/public/publicUtils'
export default defineComponent({
  props: {
    doctype: {
      type: Number,
      default: 1
    }
  },
  components: {
    AppPageTable,
    MoreFilled
  },
  data() {
    return {
      // 查询条件
      query: {
        doccode: '', //业务编号
        entId: '', //结算对象名称
        invoice: '', //发票号
        blNo: '', //提单号
        saleId: '', //业务员
        feeStatus: 1, //核销状态
        balanceNo: '', //对账单号
        checkStatus: 1, //审核状态
        currency: '', //币种
        isIncome: this.doctype, //收支类型 0 付款 1 收款
        invoiceStatus: 0 //开票状态 0 未开票 1 已开票
      },
      //表格数据
      tableData: {
        data: [],
        option: useTableOption()
      },
      tableLoading: false,
      // 展开
      hidden: false,
      // 结算对象的数据
      settlementList: [],
      settlementLoading: false,
      // 币种
      current: [],
      // 业务员
      salesman: [],
      salesmanLoading: false,
      // 核销状态
      WriteOffStatus: [
        {
          label: '全部',
          value: ''
        },
        {
          label: '未核销',
          value: 0
        },
        {
          label: '已核销',
          value: 1
        }
      ],
      // 审核状态
      aduitStatus: [
        {
          label: '全部',
          value: ''
        },
        {
          label: '未审核',
          value: 0
        },
        {
          label: '已审核',
          value: 1
        }
      ],
      //费用类型
      feenameList: [],
      feenameLoading: false,
      // 币种数组
      curList: [],
      currentLoading: false
    }
  },
  computed: {},
  methods: {
    // 获取币种类型
    async getCurrentData(val) {
      this.currentLoading = true
      let res = await this.$http.get('/api/base/currency/dropdownlist', {
        keywords: val
      })
      this.current = res.map((item) => {
        return {
          label: item.currencyCode + '|' + item.currencyName,
          value: item.currencyCode
        }
      })
      this.currentLoading = false
    },

    // 获取列表数据
    async getList() {
      let search = {
        PageIndex: this.tableData.option.page,
        PageSize: this.tableData.option.pageSize,
        ...this.query
      }
      this.tableLoading = true
      let res = await this.$http.post('/api/docworkfee/getWorkFee', search)
      res.content.forEach((item) => {
        if (item.portDeparture) {
          item.portDepartureName = item.portDeparture?.portName
        } else {
          item.portDepartureName = ''
        }
        if (item.portDestination) {
          item.portDestinationName = item.portDestination?.portName
        } else {
          item.portDestinationName = ''
        }
        if (this.curList.indexOf(item.currency) === -1) {
          this.curList.push(item.currency)
        }
        if (item.invoice) {
          item.invoiceCode = item.invoice?.invoiceCode
          item.invoiceDate = item.invoice?.invoiceDate
        } else {
          item.invoiceCode = ''
          item.invoiceDate = ''
        }
      })
      this.tableData.data = res.content
      this.tableData.option.total = res.totalElements
      this.tableLoading = false
    },

    // 重置
    reset() {
      this.query = {
        doccode: '', //业务编号
        entId: '', //结算对象名称
        invoice: '', //发票号
        blNo: '', //提单号
        saleId: '', //业务员
        feeStatus: 1, //核销状态
        balanceNo: '', //对账单号
        checkStatus: 1, //审核状态
        currency: '', //币种
        isIncome: this.doctype, //收支类型 0 付款 1 收款
        invoiceStatus: 0 //开票状态 0 未开票 1 已开票
      }
      this.getList()
    },

    // 跳转业务详情页面
    toEditPage(row) {
      this.$router.openTab({
        path: '/business/docDetail',
        query: {
          id: row.docId,
          title: `业务详情${row.doccode}`,
          iscopy: false,
          tab: '费用信息'
        }
      })
    },

    // 获取结算对象的数据
    async getBusDetail(val) {
      this.settlementLoading = true
      let res = await this.$http.get('/api/buenterprise/dropdownlist', {
        KeyWords: val
      })
      res.forEach((item) => {
        item.label = item.entCode
        item.value = item.id
      })
      this.settlementList = res
      this.settlementLoading = false
    },

    // 获取业务员
    async getSalesman(val) {
      this.salesmanLoading = true
      let res = await this.$http.get('/api/user/userList', {
        keyword: val
      })
      res.forEach((item) => {
        item.label = item.nickName
        item.value = item.id
      })
      this.salesman = res
      this.salesmanLoading = false
    },

    // 获取费用类型
    async getFeeType(val) {
      this.feenameLoading = true
      let res = await this.$http.get('/api/base/feetype/query', {
        KeyWords: val
      })
      res.content.forEach((item) => {
        item.label = item.feeName
        item.value = item.feeName
      })
      this.feenameList = res.content
      this.feenameLoading = false
    }
  },
  watch: {},

  created() {}
})
</script>

<style lang="scss" scoped>
.form-container {
  border: 1px solid #e8e8e8;
  padding: 6px 6px 6px 8px;
  background-color: #ffffff;

  :deep(.el-form-item--small .el-form-item__label) {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.85);
  }

  :deep(.el-input--suffix .el-input__inner) {
    padding-right: 4px;
  }

  :deep(.el-form--inline .el-form-item) {
    display: flex;
    margin-right: 0;
  }

  :deep(.el-form-item--small.el-form-item) {
    margin-bottom: 8px;
  }
}

.in-container {
  height: auto;
}

.btn-box {
  margin-bottom: 8px;
}

.flex-container {
  display: flex;
}

.statistical-results {
  padding-left: 20px;
  padding-right: 20px;

  .statistical-tip {
    display: inline-block;
    background: #2867c9;
    width: 4px;
    height: 20px;
    vertical-align: middle;
    margin-left: -20px;
  }

  .statistical-label {
    margin: 0 16px;
    display: inline-block;
    font-weight: 600;
    color: #000000a6;
  }

  .statistical-text {
    color: red;
    font-size: 12px;
    line-height: 18px;
  }
}

.doccode-text {
  color: rgb(24, 144, 255);
  cursor: pointer;
}

.button-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>
